<template>
    <div>
        <div>
            <button @click="isShow = !isShow">切换显示</button>
        </div>
        <!-- <transition name="fade">
            <div id="box" v-if="isShow"></div>
        </transition> -->
        <transition
            enter-active-class="animate__animated animate__rotateIn"
            leave-active-class="animate__animated animate__bounceOut"
        >
            <div id="box" v-if="isShow"></div>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isShow: true,
            };
        },
    };
</script>

<style lang="less" scoped>
    .animate__animated {
        animation-duration: 3s;
    }
    #box {
        width: 300px;
        height: 300px;
        background: pink;
        transition: all 1s;
    }
    .fade-enter {
        opacity: 0;
    }
    .fade-enter-active {
        transition: all 1s;
    }
    .fade-enter-to {
        opacity: 1;
    }
    .fade-leave {
        opacity: 1;
    }
    .fade-leave-active {
        transition: all 1s;
    }
    .fade-leave-to {
        opacity: 0;
    }
</style>